<template>
  <!-- 内容部分 -->
  <div class="goods-container" v-for="goods in goodslist" :key="goods.goods_id">
    <div class="form-group form-check quanxuan left">
      <el-checkbox 
        size="large" 
        :id="goods.goods_id" 
        v-model="goods.selected" 
        @change="updateTotal(goods)"
      />
      <label class="form-check-label qx" :for="goods.goods_id">
        <image :src="goods.goods_image"></image>
      </label>
    </div>
    
    <div class="right">
      <div class="top">{{ goods.goods_name }}</div>
      <div class="bottom">
        <div class="price">￥{{ goods.goods_price }}</div>
        
        <!-- 修改为数字输入框 -->
        <el-input-number 
          v-model="goods.goods_count" 
          :min="1" 
          :max="10" 
          @change="updateTotal(goods)"
          style="width: 100px;"
        />
      </div>
    </div>
  </div>
  
  <div style="width: 100%;height: 50px;"></div>
  
  <!-- 底部合计设计 -->
  <div class="footer-container">
    <!-- 全选 -->
    <div class="form-group form-check quanxuan">
      <div>
        <el-checkbox v-model="checked1" size="large" @change="toggleAll" />
      </div>
      <label class="form-check-label qx" for="exampleCheck1">全选</label>
    </div>

    <!-- 合计 -->
    <div>
      <span>合计: </span>
      <span class="price">￥{{ totalPrice }}</span>
    </div>

    <!-- 提交按钮 -->
    <el-button 
      type="primary" 
      class="tj-button" 
      @click="handleCheckout"
    >
      结算({{ totalCount }})
    </el-button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'; // 引入 Vue Router

export default {
  data() {
    return {
      checked1: false,
      goodslist: [
        {
          goods_id: 1,
          goods_name: '手工雕刻',
          goods_image: '../../static/images/product1.jpg',
          goods_price: 100,
          goods_count: 2, // 数量是可修改的
          selected: false, // 添加 selected 标记
        },
        {
          goods_id: 2,
          goods_name: '手工雕刻',
          goods_image: '../../static/images/product1.jpg',
          goods_price: 200,
          goods_count: 1,
          selected: false,
        },
        {
          goods_id: 3,
          goods_name: '手工雕刻',
          goods_image: '../../static/images/product1.jpg',
          goods_price: 300,
          goods_count: 3,
          selected: false,
        }
      ],
    };
  },
  methods: {
    // 更新商品选择时的合计金额和数量
    updateTotal(goods) {
      this.updateTotalPriceAndCount();
    },
    
    // 全选或取消全选
    toggleAll() {
      if (this.checked1) {
        this.goodslist.forEach(goods => goods.selected = true);
      } else {
        this.goodslist.forEach(goods => goods.selected = false);
      }
      this.updateTotalPriceAndCount();
    },
    
    // 更新合计金额和数量
    updateTotalPriceAndCount() {
      this.totalCount = this.selectedGoods.reduce((sum, goods) => sum + goods.goods_count, 0);
      this.totalPrice = this.selectedGoods.reduce((sum, goods) => sum + goods.goods_price * goods.goods_count, 0);
    },

    // 处理结算按钮点击事件
    handleCheckout() {
      console.log("handleCheckout 方法被调用");
    
      // 获取已选中的商品
      const selectedGoods = this.selectedGoods;
    
      // 如果没有选中商品，则提示用户
      if (selectedGoods.length === 0) {
        uni.showToast({
          title: '请选择要下单的商品',
          icon: 'none'
        });
        return;
      }
    
      // 组织数据，传递到订单确认页面
      uni.navigateTo({
        url: "/pages/order-confirm/order-confirm?detail=" + JSON.stringify(selectedGoods),
        success: () => {
          console.log("跳转成功", selectedGoods);
        },
        fail: (err) => {
          console.error("跳转失败", err);
        }
      });
    }

  },
  computed: {
    // 选中的商品列表
    selectedGoods() {
      return this.goodslist.filter(goods => goods.selected);
    },
    totalCount() {
      return this.selectedGoods.reduce((sum, goods) => sum + goods.goods_count, 0);
    },
    totalPrice() {
      return this.selectedGoods.reduce((sum, goods) => sum + goods.goods_price * goods.goods_count, 0);
    }
  }
}
</script>

<style scoped>
@import url("../../assets/css/bootstrap.css");

.footer-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: white;
  border-top: 1px solid gray;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  z-index: 1000;
}

.quanxuan {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.quanxuan .qx {
  margin-top: 5px;
  margin-left: 5px;
}
.price {
  color: red;
}
.tj-button {
  border-radius: 20px;
  min-width: 90px;
}
.goods-container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .left {
    image {
      height: 100px;
      width: 100px;
    }
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    .top {
      margin-top: 30px;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .price {
        margin-top: 5px;
      }
    }
  }
}
</style>